<template>
	<view class="container">
		<view class="topbg">
			<view class="list u-p-t-10" style="border-radius: 40upx 40upx 0upx 0upx;">
				<view class="item" style="background: #f1f7ff;border-radius: 3px;margin-top: 35px;padding:20rpx 30rpx;">
					<view class="item-title">我需要</view>
					<view class="item-value">{{item.ineed}}</view>
				</view>
				<view class="item" style="background: #f1f7ff;border-radius: 3px;margin-top: 15px;padding:20rpx 30rpx;">
					<view class="item-title">我意向</view>
					<view class="item-value">{{item.imean}}</view>
				</view>
			</view>
		</view>

		<view class="list">
			<view class="item">
				<view class="item-title">名称</view>
				<view class="item-value">{{info.name}}</view>
			</view>
			<view class="item" v-for="(item,index) in info.demandList" :key="index">
				<view class="item-title">{{item.key}}</view>
				<view class="item-value">
					<block v-if="item.key == '图片'">
						<image :src="baseUrl + item.value" @tap="previewImage(0,item.value)" style="width:200rpx;height:200rpx;"></image>
					</block>
					<block v-else>{{item.value}}</block>
				</view>
			</view>
			<view style="width: 100%;height: 20upx;background: #F5F5F9;"></view>
			<block v-if="type == 1">
				<view class="require-list">
					<view class="require-header">
						<image class="header-icon" src="../../static/mine/follow/headericon.png"></image>
						<view class="header-title" v-if="info.iam == '个人'">个人要求</view>
						<view class="header-title" v-else>企业要求</view>
					</view>

					<view class="require-item" v-for="(item,index) in info.intention" :key="index">
						{{getStr(item)}}
					</view>
				</view>
			</block>
			<block v-else>
				<view class="item" v-for="(item,index) in info.intentionList" :key="'a'+index">
					<view class="item-title">{{item.key}}</view>
					<view class="item-value">{{item.value}}</view>
				</view>
			</block>

		</view>

		<view style="width: 100%;height: 20upx;background: #F5F5F9;"></view>
		<view class="from-user">
			<view class="f-logo" @click="detailCompany(user.id)" :style="{ backgroundImage: 'url(' + (user.logo != undefined ? baseUrl+user.logo : defaultLogo )+ ')' }">
				<image :src="logoMask" mode="aspectFill"></image>
			</view>
			<view class="right">
				<view class="right-name">{{user.name}}</view>
				<view class="right-bottom">
					<view class="type">{{info.iam}}</view>
					<u-rate class="rate" :disabled="true" :count="5" v-model="user.score" active-color="#FF9900"></u-rate>
				</view>
			</view>
		</view>
		<image class="img-line" src="../../static/homepage/bmx.png"></image>
		<block v-if="del">
			<view class="u-flex u-row-center u-m-b-50">
			<view class="btn" style="width:80%;height:80rpx;line-height: 80rpx;" @click="handleClickDel(info.id)">
				删除
			</view>
			</view>
		</block>
		<block v-else>
			<view class="u-flex u-row-around u-p-b-50">
				<view class="btn" v-if="!isCollecte" @click="handleClickCollecte">
					立即收藏
				</view>
				<view class="btn btn2" v-if="isCollecte" @click="handleClickCollecte2">
					取消收藏
				</view>
				<view class="btnaccept" @click="msg(user.id)">立即沟通</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logoMask: this.$mAssetsPath.logoMask,
				defaultLogo: this.$mAssetsPath.defaultLogo,
				baseUrl: this.$mConfig.baseUrl,
				value: 3,
				id: 0,
				type: 0,
				cpde: 0,
				item: [],
				info: [],
				user: [],
				isCollecte: false,
				del: 0,
				userInfo: this.$store.state.userInfo
			}
		},
		onLoad(options) {
			console.log(options);
			if (options) {
				this.item = JSON.parse(decodeURIComponent(options.row));
				this.id = this.item.businessId;
				this.type = parseInt(options.type);
				this.del = options.del;
			}
			this.initPage();
		},
		methods: {
			async msg(id) {
				if (this.userInfo.id == this.user.id) {
					uni.showToast({
						title: "不能和自己聊天哦！",
						icon: 'none'
					})
					return;
				}
				let result = await this.$apis.addTmpChat({
					id: id
				});

				uni.setStorageSync('tmpMsgId', id);
				uni.setStorageSync('msgType', 999);
				uni.switchTab({
					url: "../tabBar/message"
				})
			},
			previewImage(index, files) { //预览图片
				let imgs = [this.baseUrl + files];
				uni.previewImage({
					current: index,
					urls: imgs
				});
			},
			detailCompany(e) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.releaseNumber,
					query: {
						id: e
					}
				});
			},
			async handleClickDel(id) {
				let result = await this.$apis.delMyPublish({
					id: id,
					type: this.type
				});
				if (result.code == 200) {
					uni.showToast({
						title: "删除成功"
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 2000)
				}
			},
			getStr(obj) {
				var str = [];
				Object.keys(obj).forEach(function(key) {
					if (obj[key] !== '' && obj[key] != undefined) str.push(obj[key]);
				});
				return str.join('/');
			},
			async handleClickCollecte() {
				let obj = {}
				obj.businessId = this.id;
				obj.type = this.type;
				obj.imean = this.item.imean;
				obj.ineed = this.item.ineed;
				obj.userName = this.user.name;
				console.log('this.obj', obj)
				let data = await this.$apis.addBusinessCollection(obj);
				if (data.code === 200) {
					uni.showToast({
						duration: 1000,
						title: '收藏成功'
					})
					this.initPage();
				}
			},
			async handleClickCollecte2() {
				let obj = {}
				obj.businessId = this.info.id;
				obj.type = this.type;
				console.log('this.obj', obj)
				let data = await this.$apis.deleteBusinessCollection(obj);
				if (data.code === 200) {
					uni.showToast({
						duration: 1000,
						title: '取消收藏成功'
					})
					this.initPage();
				}
			},
			async initPage() {
				let reqBody = {
					objId: this.id,
					type: this.type
				}
				let result = await this.$apis.selectMessageByType(reqBody);
				this.info = result.data.detail;
				this.user = result.data.user;
				this.isCollecte = result.data.isCollecte;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		width: 270rpx;
		height: 64rpx;
		background: #4C9CFF;
		border-radius: 20px;
		line-height: 64rpx;
		text-align: center;
		color: #fff;
		font-size: 13px;
	}

	.btn2 {
		background: #d1d1d1;
	}

	.topbg {
		padding-top: 50rpx;
		background-color: #DF61FF;
	}

	.btnaccept {
		width: 270rpx;
		height: 64rpx;
		background: #6ADE7D;
		border-radius: 40upx;
		line-height: 64rpx;
		text-align: center;
		color: #fff;
		font-size: 26rpx;
	}

	.container {
		.list {			
			width: 100%;
			background: #fff;


			.require-list {
				background: #F8F8FC;
				padding: 34upx 0 0 0;
				margin: 30upx 20upx;
				border-radius: 20upx;

				.require-item {
					width: 100%;
					line-height: 50upx;
					border-bottom: #DADFED solid 1upx;
					padding: 20rpx 22rpx;

					.item-index {
						background-color: #AB61FF;
						border-radius: 50%;
						width: 32upx;
						height: 32upx;
						color: #fff;
						text-align: center;
						align-items: center;
						font-size: 22upx;
					}

					.item-text {
						font-size: 28upx;
						color: #9DA2B0;
						margin-left: 17upx;
					}

					.item-num {
						font-size: 28upx;
						color: #FF9E21;
						margin-left: 17upx;
					}
				}

				.require-item:last-child {
					border: none;
				}

				.require-header {
					display: flex;
					align-items: center;
					margin-bottom: 30upx;

					.header-icon {
						width: 38upx;
						height: 28upx;
						margin-left: 22upx;
					}

					.header-title {
						margin-left: 20upx;
						color: #0D1D36;
						font-size: 34upx;
					}
				}
			}

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: #DADFED solid 1upx;
				padding: 35rpx 22upx;
				margin: 0 20upx;

				.item-title {
					width: 350rpx;
					color: #9DA2B0;
					font-size: 30upx;
				}

				.item-value {
					color: #0D1D36;
					font-size: 30upx;
					font-weight: 500;
				}

				.price {
					color: #FE5022;
				}
			}

			.last-item {
				border-bottom: none;
			}
		}

		.header {
			width: 100%;
			height: 120upx;
			background: linear-gradient(0deg, #AB61FF, #DF61FF);
		}
	}

	.from-user {
		padding: 23upx 32upx 23upx 32upx;
		display: flex;

		.topic {
			width: 94upx;
			height: 110upx;
		}

		.right {
			display: flex;
			flex-direction: column;
			margin-left: 28upx;

			.right-name {
				color: #0D1D36;
				font-size: 30upx;
			}

			.right-bottom {
				display: flex;
				margin-top: 20upx;

				.rate {
					margin-left: 20upx;
				}

				.type {
					border: #FF9900 solid 1upx;
					color: #FF9900;
					font-size: 24upx;
					line-height: 24upx;
					padding: 4upx 13upx;
					border-radius: 6upx;
				}
			}
		}
	}

	.img-line {
		width: 100%;
		height: 6upx;
		margin-bottom: 140upx;
	}

	.f-logo {
		width: 102rpx;
		height: 118rpx;
		background-size: auto 100%;
		background-position: center center;

		image {
			width: 102rpx;
			height: 118rpx;
		}
	}
</style>
